<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>uupaa-event.js - Reference</title>
<style type="text/css">@import url(./README.css);</style>
</head>
<body>
<p>
   | <a href="http://code.google.com/p/uupaa-js-spinoff/">Project Home(Google Code)</a>
   | <a href="./README.htm">README</a>
   | <a href="./DEMO.htm">DEMO</a>
   | <a href="./CLASS.htm">Reference</a> |<br />
   | <a href="./CHANGELOG.htm">ChangeLog</a>
   | <a href="./LICENSE.htm">License</a>
   |
</p>

<hr />
|
<a href="#uu.event">uu.event</a> |
<a href="#uuClass.Event">uuClass.Event</a> |

<hr />
<h2><a name="uuClass.Event">uuClass.Event</a></h2>
<p>イベントハンドラを提供します。</p>
<p>uupaa.js は <b>handleEvent</b> メソッドを持つインスタンスにイベントを配信します。
 <br />handleEvent メソッドは DOM Level2 Event の仕様です(JavaScript第5版 420pを参考にしてください)。
</p>
<p>以下はクリックイベントハンドラの実装例です。</p>
<a href="demo/handler.htm" class="run">Run</a>
<pre class="eg">
var MyClass = function(element) {
  <u>// クリックイベントをアタッチ</u>
  <b>uu.event.attach</b>(element, "click", this);
};
MyClass.prototype.<b>handleEvent</b> = function(evt) { <u>// 第一引数にイベントオブジェクトが渡される</u>
  <u>// イベントバブルを停止しマウス座標を取得</u>
  var mpos = <b>uu.event.stop</b>(evt).<b>mouse</b>(evt);
  document.getElementById("result").innerHTML = "x=" + mpos.x + ", y=" + mpos.y;
};
var my = new MyClass(document.getElementById("clicktarget"));
</pre>
      <p>また、このようにもできます。</p>
      <a href="demo/handler2.htm" class="run">Run</a>
<pre class="eg">
var obj = {
  <b>handleEvent</b>: function(evt) {
    var e = document.getElementById("result");
    e.innerHTML = "click: " + evt.target.id;
  }
};
<b>uu.event.attach</b>(document, "click", obj);
</pre>

<p>handleEvent の第一引数にはイベントオブジェクト(<i>evt</i>)が渡されます。
<br /><i>evt</i> は以下の情報を含んでいます。</p>
<dl>
  <dt><i>evt</i>.target</dt>
    <dd>イベント発生源のノードです。</dd>
  <dt><i>evt</i>.currentTarget</dt>
    <dd>Gecko, WebKit, Opera なら現在処理中(キャプチャリング/バブリング中)のノードです。
        <br />IE なら キャプチャリングフェーズ は含まれません。
    </dd>
  <dt><i>evt</i>.relatedTarget</dt>
    <dd>mouseover と mouseout イベント専用の情報です。<br />
      <i>evt</i>.target で mouseover が発生した場合は、<i>evt</i>.relatedTarget に mouseout した要素が格納されます。<br />
      <i>evt</i>.target で mouseout が発生した場合は、<i>evt</i>.relatedTarget に mouseover した要素が格納されます。</dd>
</dl>

<hr />
<dl>
<!-- -->
  <dt><a name="uu.event">uu.event</a> - system instance - システムインスタンス</dt>
  <dd><p>uu.event は、最初から用意されている uuClass.Event のインスタンスです。</p>
  </dd>

<!-- -->
  <dt><a name="uuClass.Event.attach">uuClass.Event.attach</a> - attach event handler - イベントのアタッチ</dt>
  <dd><p>uuClass.Event.attach(<i>elm</i>, <i>type</i>, <i>obj</i>, <i>capture</i> = false) はイベントをアタッチします。</p>
      <p>全く同じイベントを二重登録しようとすると無視します。</p>
      <p>handleEvent メソッドが実装されていないインスタンスを <i>obj</i> に指定するとエラーが発生します。</p>
<pre>
@param Element elm       - 監視対象の要素を指定します。
@param String  type      - イベントタイプを文字列で指定します。
                           "mousemove,mousedown" のように
                           カンマ( "," )区切りで複数のイベントを一度に指定することもできます。
@param Object  obj       - イベント発生時にコールバックするインスタンスを指定します。
@param Boolean [capture] - キャプチャーする場合は true を指定します。
@return this             - this を返します。
@throw TypeError("uuClass.Event handleEvent not impl") - handleEvent が実装されていない
</pre>
  </dd>

<!-- -->
  <dt><a name="uuClass.Event.detach">uuClass.Event.detach</a> - detach event handler - イベントのデタッチ</dt>
  <dd><p>uuClass.Event.detach(<i>elm</i>, <i>type</i>, <i>obj</i>, <i>capture</i> = false) はイベントをデタッチします。</p>
      <p><a href="#uuClass.Event.attach">uuClass.Event.attach</a> でアタッチする際に指定した引数と
          同じ組み合わせの引数を指定しないとイベントをデタッチできません。</p>
      <p><i>type</i> に複数のイベントを指定している場合は、個別に解除することができます。</p>
      <p>指定可能な引数は <a href="#uuClass.Event.attach">uuClass.Event.attach</a> を参照してください。</p>
  </dd>

<!-- -->
  <dt><a name="uuClass.Event.toggle">uuClass.Event.toggle</a> - toggle event handler - イベントハンドラをアタッチまたはデタッチ</dt>
  <dd><p>uuClass.Event.toggle(<i>me</i>, <i>elm</i>, <i>type</i>, <i>capture</i> = false) はイベントをアタッチまたはデタッチします。
      <br />既にアタッチされているイベントを指定するとデタッチします。
      <br />アタッチしていない状態ならアタッチします。
      <br />指定可能な引数は <a href="#uuClass.Event.attach">uuClass.Event.attach</a>,
          <a href="#uuClass.Event.detach">uuClass.Event.detach</a> と同じです。</p>
      <p>handleEvent メソッドが実装されていないインスタンスを <i>obj</i> に指定するとエラーが発生します。</p>
  </dd>

<!-- -->
  <dt><a name="uuClass.Event.stop">uuClass.Event.stop</a> - execute stop-propagation and prevent-default - イベントの抑止</dt>
  <dd><p>uuClass.Event.stop(<i>evt</i>, <i>cancel</i> = true) は
      イベントのバブルアップ(伝播)と、デフォルトの動作を(可能ならば)抑止します。</p>
<pre>
@param event evt        - イベントオブジェクトを指定します。
@param Boolean [cancel] - デフォルト動作をキャンセルする場合に true を指定します。
                          キャンセル不能な場合は何も起きません。
@return this            - this を返します。
</pre>
  </dd>

<!-- -->
  <dt><a name="uuClass.Event.kind">uuClass.Event.kind</a> - convert event type to event kind - イベントタイプをイベント種別に変換</dt>
  <dd><p>uuClass.Event.kind(<i>evt</i>, <i>kind</i> = uuConst.Event.Kind.Generic) は イベントタイプをイベント種別(定数)に変換します。</p>
<pre>
@param event              evt    - イベントオブジェクトを指定します。
@param uuConst.Event.Kind [kind] - uuConst.Event.Kind に定義されている定数を指定します。
                                   デフォルトは uuConst.Event.Kind.Generic です。
@return Number                   - イベント種別の下位 8 bit を返します。
</pre>
  </dd>

<!-- -->
  <dt><a name="uuClass.Event.key">uuClass.Event.key</a> - get key state - キーの状態を取得</dt>
  <dd><p>uuClass.Event.key(<i>evt</i>) は キーの状態を取得します。</p>
<pre>
@param event evt - イベントオブジェクトを指定します。
@return Hash     - Hash( { alt, shift, ctrl, key } ) を返します
</pre>
<table>
<tr><th>Hash</th><th>Value</th></tr>
<tr><td>alt</td><td>alt キー押下で true</td></tr>
<tr><td>shift</td><td>shift キー押下で true</td></tr>
<tr><td>ctrl</td><td>ctrl キー押下で true</td></tr>
<tr><td>key</td><td>押下したキーコード</td></tr>
</table>
  </dd>

<!-- -->
  <dt><a name="uuClass.Event.mouse">uuClass.Event.mouse</a> - get mouse state - マウスの状態を取得</dt>
  <dd><p>uuClass.Event.mouse(<i>evt</i>, <i>more</i> = false) は マウスの座標と状態を取得します。</p>
<pre>
@param event   evt    - イベントオブジェクトを指定します。
@param Boolean [more] - 全ての情報が必要な場合に true を指定します。デフォルトは false です。
                        false を指定すると、マウスの絶対座標だけを含んだ Hash を返します。
@return Hash          - Hash( { x, y } ) または
                        Hash( { x, y, ox, oy, cx, cy, left, mid, right, click, wheel } ) を返します。
</pre>
<table>
<tr><th>Hash</th><th><i>more</i></th><th>Value</th></tr>
<tr><td>x, y</td><td>true or false</td><td>画面左上からの絶対座標(スクロール量を含む)</td></tr>
<tr><td>ox, oy</td><td>true</td><td>画面左上からの相対座標(スクロール量を含まない)</td></tr>
<tr><td>cx, cy</td><td>true</td><td>レイアウト上の親要素の左上からの相対座標(Client座標)</td></tr>
<tr><td>left</td><td>true</td><td>左クリックで true</td></tr>
<tr><td>mid</td><td>true</td><td>中クリックで true</td></tr>
<tr><td>right</td><td>true</td><td>右クリックで true</td></tr>
<tr><td>click</td><td>true</td><td>クリック数: シングルクリックで1, ダブルクリックで2, トリプルクリックで3</td></tr>
<tr><td>wheel</td><td>true</td><td>ホイールの回転: 上に回転させると-1, 下に回転させると1</td></tr>
</table>
  </dd>


<!-- -->
  <dt><a name="uuClass.Event.drag">uuClass.Event.drag</a> - generic drag and drop impl - ドラッグ and ドロップの汎用的な実装
  <dd><p>uuClass.Event.drag(<i>evt</i>, <i>elm</i>) は ドラッグ and ドロップの本質的な実装を提供します。</p>
      <p>この実装を元にすることで、より付加価値の高い処理を実現する足がかりになるでしょう。</p>
<pre>
@param event   evt  - イベントオブジェクトを指定します。
@param Element elm  - ドラッグで移動する要素を指定します。
@return Number/Hash - 0 または Hash( { x, y } ) を返します。x, y は要素の絶対座標です。
</pre>
      <p>このように使います。</p>
      <a href="demo/drag.htm" class="run">Run</a>
<pre class="eg">
&lt;style type="text/css"&gt;
#drag1 {
  background-color: green;
  position: absolute; left: 0; top: 0;
  width: 100px; height: 100px;
}
#drag2 {
  background-color: yellowgreen;
  position: relative; left: 0; top: 0;
  width: 100px; height: 100px;
}
&lt;/style&gt;
&lt;div id="drag1"&gt;draggable1&lt;/div&gt;
&lt;div style="position: absolute; left: 100px; top: 100px"&gt;
  &lt;div id="drag2"&gt;draggable2&lt;/div&gt;
&lt;/div&gt;
var MyDraggable = function(elm) {
  this.elm = elm;
  elm.style.cursor = "move";
  <b>uu.event.attach</b>(this.elm, "mousedown", this);
};
MyDraggable.prototype = {
  <b>handleEvent</b>: function(evt) {
    uu.event.stop(evt);
    <b>uu.event.drag</b>(evt, this.elm);
    if (uu.event.kind(evt) &lt;= 2) {
      <b>uu.event.toggle</b>(document.uniqueID ? this.elm : document,
                        "mousemove,mouseup", this, true);
    }
  }
};
var drag1 = new MyDraggable(document.getElementById("drag1"));
var drag2 = new MyDraggable(document.getElementById("drag2").parentNode);
</pre>
  </dd>

</dl>

</body>
</html>
